<template>
  <div class="phone-container container">
    <VmGoodsText :title="title" 
    @currentTitle="setCurrentGoods"
    :moreHref="{
        name: '更多',
        hrefUrl: 'https://www.vmall.com/list-36'
    }"/>
    <ul>
        <a :href="item.hrefUrl" v-for="(item,index) in store.state.category.phoneGoodsPart.value" :key="index">
            <VmGoodsCard 
                :class="{'margin_right_10px':(index+1)%4!=0, 'goods__card-hover':true }"
                width='291px' height='386px'
                :imgInfo="{
                    imgSrc: item.imgUrl,
                    width: '180px',
                    height: '192px'
                }"
                :goodsInfo="{
                    title: item.title,
                    tipsTag: item.tipsTag,
                    desc: item.desc,
                    descStyle: {
                        marginBottom: '10px'
                    },
                    titleStyle: {
                        fontWeight: '700',
                        color: '#212121',
                        opacity: '1',
                        marginBottom: '10px',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: '80%'
                    },
                    price: item.price,
                    oldPrice: item.oldPrice,
                    tags: item.tags
                }"
            />
        </a>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import VmGoodsText from '@/components/vm-goods-part/vm-goods-text'
import VmGoodsCard from '@/components/vm-goods-part/vm-goods-card'

export default { 
  name: 'PhonePart',
  components: {
    VmGoodsText,
    VmGoodsCard
  },
  setup () {
    const title = ref(['手机', '企业购专区'])
    const store  = useStore()
    store.dispatch('category/getCurrentGoodsPart',{
        title: title.value[0],
        part: 'phoneGoodsPart',
    })

    const setCurrentGoods = index => {
        store.dispatch('category/getCurrentGoodsPart', {
            title: title.value[index],
            part: 'phoneGoodsPart'
        }) 
    }

    return { store, title, setCurrentGoods }
  }
}
</script>

<style lang="scss" scoped>
.phone-container {
    position: relative;
    top: -360px;
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}
</style>